<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>员工信息管理 - HRM系统</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <link rel="stylesheet" th:href="@{/css/employee.css}">
</head>
<body>
<div class="dashboard">
    <header class="header">
        <div class="logo">HRM系统</div>
        <div class="user-info">
            <span th:text="${currentUser.realName}"></span>
            <span class="role-badge" th:text="${currentUser.roleId.roleName}"></span>
            <a href="/logout" class="logout-btn">退出</a>
        </div>
    </header>
    <main class="employee-container">
        <!-- 返回首页按钮 -->
        <div class="back-to-home">
            <a href="/home" class="btn btn-back">← 返回首页</a>
        </div>

        <!-- 页面标题和操作按钮 -->
        <div class="module-header">
            <h1 class="module-title">员工信息管理</h1>
            <div class="action-buttons" th:if="${roleIdValue lt 3}">
                <a href="/employee/add" class="btn btn-primary">新增员工</a>
                <button onclick="exportEmployees()" class="btn btn-export">导出Excel</button>
                <script>
                    function exportEmployees() {
                        window.open('/api/employee/export', '_blank');
                    }
                </script>
            </div>
        </div>

        <!-- 搜索筛选区域 -->
        <div class="search-filter">
            <form th:action="@{/employee}" method="get" class="search-form">
                <div class="filter-row">
                    <div class="form-group">
                        <select name="departmentId" class="form-control">
                            <option value="">全部部门</option>
                            <option
                                    th:each="dept : ${departments}"
                                    th:value="${dept.departmentID}"
                                    th:text="${dept.departmentName}"
                                    th:selected="${currentDepartmentId == dept.departmentID}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <select name="positionId" class="form-control">
                            <option value="">全部职位</option>
                            <option
                                    th:each="position : ${positions}"
                                    th:value="${position.positionId}"
                                    th:text="${position.positionName}"
                                    th:selected="${currentPositionId == position.positionId}">
                            </option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input
                                type="text"
                                name="keyword"
                                class="form-control"
                                placeholder="输入姓名或工号"
                                th:value="${currentKeyword}">
                    </div>
                </div>
                <div class="button-row">
                    <button type="submit" class="btn btn-search">搜索</button>
                    <button
                            type="reset"
                            class="btn btn-reset"
                            onclick="location.href='/employee'">重置</button>
                </div>
            </form>
        </div>
        <script th:inline="javascript">
            document.addEventListener('DOMContentLoaded', function() {
                const departmentSelect = document.querySelector('select[name="departmentId"]');
                const positionSelect = document.querySelector('select[name="positionId"]');
                const allDepartments = /*[[${departments}]]*/ [];
                const allPositions = /*[[${positions}]]*/ [];

                // 加载所有职位
                function loadAllPositions() {
                    positionSelect.innerHTML = '<option value="">全部职位</option>';
                    allPositions.forEach(position => {
                        const option = document.createElement('option');
                        option.value = position.positionId;
                        option.textContent = position.positionName;
                        if (position.positionId == /*[[${currentPositionId}]]*/ '') {
                            option.selected = true;
                        }
                        positionSelect.appendChild(option);
                    });
                }

                // 部门变更时更新职位选项
                departmentSelect.addEventListener('change', function() {
                    const departmentId = this.value;

                    if (!departmentId) {
                        // 选择了"全部部门"，显示所有职位
                        loadAllPositions();
                        return;
                    }

                    positionSelect.innerHTML = '<option value="">加载中...</option>';

                    fetch('/api/positions/by-department/' + departmentId)
                        .then(response => response.json())
                        .then(positions => {
                            positionSelect.innerHTML = '<option value="">全部职位</option>';
                            positions.forEach(position => {
                                const option = document.createElement('option');
                                option.value = position.positionId;
                                option.textContent = position.positionName;
                                positionSelect.appendChild(option);
                            });
                        });
                });

                // 职位变更时更新部门选择
                positionSelect.addEventListener('change', function() {
                    const positionId = this.value;
                    if (!positionId) return;

                    // 在全部部门状态下选择具体职位时
                    if (!departmentSelect.value) {
                        const selectedPosition = allPositions.find(p => p.positionId == positionId);
                        if (selectedPosition && selectedPosition.departmentID) {
                            departmentSelect.value = selectedPosition.departmentID.departmentID;
                        }
                    }
                });

                // 初始化
                if (departmentSelect.value) {
                    departmentSelect.dispatchEvent(new Event('change'));
                }
            });
        </script>

        <!-- 表格数据展示 -->
        <table class="data-table">
            <thead>
            <tr>
                <th width="80px">员工ID</th>
                <th width="100px">姓名</th>
                <th width="150px">部门</th>
                <th width="150px">职位</th>
                <th width="120px">入职日期</th>
                <th width="80px">状态</th>
                <th width="200px">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="employee : ${employees}" th:if="${employee.status}">
                <td th:text="${employee.userId}"></td>
                <td th:text="${employee.realName}"></td>
                <td th:text="${employee.departmentID.departmentName}"></td>
                <td th:text="${employee.jobPositionID.positionName}"></td>
                <td th:text="${#temporals.format(employee.startingDate, 'yyyy-MM-dd')}"></td>
                <td>
                    <span class="status-active">在职</span>
                </td>
                <td class="action-buttons">
                    <a th:href="@{/employee/view/{id}(id=${employee.userId})}" class="btn-action view">查看</a>
                    <a th:href="@{/employee/edit/{id}(id=${employee.userId})}"
                       class="btn-action edit"
                       th:if="${roleIdValue lt 4}">编辑</a>
                    <a th:href="@{/employee/delete/{id}(id=${employee.userId})}"
                       class="btn-action delete"
                       th:if="${roleIdValue lt 3 and currentUser.userId != employee.userId}"
                       onclick="return confirm('确定要删除该员工吗？此操作不可恢复！');">
                        删除
                    </a>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- 分页组件 -->
        <nav class="pagination">
            <ul>
                <li th:if="${employees.hasPrevious()}">
                    <a th:href="@{'/employee'(page=0,
                departmentId=${currentDepartmentId},
                positionId=${currentPositionId},
                keyword=${currentKeyword})}">&laquo;</a>
                </li>
                <li th:each="i : ${#numbers.sequence(0, employees.totalPages-1)}"
                    th:class="${i == employees.number} ? 'active'">
                    <a th:href="@{'/employee'(page=${i},
                departmentId=${currentDepartmentId},
                positionId=${currentPositionId},
                keyword=${currentKeyword})}"
                       th:text="${i+1}"></a>
                </li>
                <li th:if="${employees.hasNext()}">
                    <a th:href="@{'/employee'(page=${employees.totalPages-1},
                departmentId=${currentDepartmentId},
                positionId=${currentPositionId},
                keyword=${currentKeyword})}">&raquo;</a>
                </li>
            </ul>
        </nav>
    </main>
</div>
</body>
</html>